<!-- 普通模式演示(vue) -->
<template>
  <view class="content">
    <z-paging ref="paging" v-model="data.dataList" @query="queryList">
      <template #top>
        <view class="u-tabs-box ">
          <u-sticky bgColor="#fff">
            <u-tabs activeColor="#4787F0" :list="tabList" :current='tabIndex' @change="tabChange"
                    :is-scroll="false" :activeStyle="tabActiveStyle" :itemStyle="tabItemStatusStyle"
                    :inactive-style="tabInactiveStyle" lineHeight="1" lineWidth="56" lineColor="#4787F0"
                    swiperWidth="750"></u-tabs>
          </u-sticky>
        </view>
        <u-search placeholder="搜索合同名称" v-model="keyword" shape="square" :showAction="false" margin="20rpx"
                  @search="search" @clear="clear" height="80rpx" placeholderColor="rgba(0,0,0,0.4)"></u-search>
      </template>
      <view class="card" v-for="(item,index) in data.dataList" :key="index"
            @click="goNav(`${pageUrl['contractDetailUrl'][userType]}?member_contract_id=${item.id}`)">
        <view class="card-header">
          <view>
            <image src="../../static/images/root-list.png" style="vertical-align: middle;"></image>
            <text>{{ item.title }}</text>
          </view>
          <u-tag :text="item.type_name" size="mini" type="warning"></u-tag>
        </view>
        <u-line dashed></u-line>
        <view class="card-body m-t-32">
          <view class="flex" style="align-items: center;">
            <u-badge :isDot="true" type="warning" max="99"></u-badge>
            <text style="padding-left: 12rpx;color: rgba(0,0,0,0.9);">
              {{ item.status_name }}
            </text>
          </view>
          <text style="display: block;color: rgba(0,0,0,0.9);margin-top: 16rpx;">{{
              item.show_name
            }}
          </text>
          <view class="flex justify-space-between">
            <text style="display: block;color: rgba(0,0,0,0.6);padding-top: 16rpx;">
              签署截止日期：{{ item.end_date }}
            </text>
            <view
                style="width: 40rpx;height: 40rpx;border: 2rpx solid rgba(0,0,0,0.2);border-radius: 40rpx;line-height: 40rpx;display: flex;align-items: center;">
              <u-icon name="arrow-rightward" color="#999999" style="margin-left: 5rpx;"></u-icon>
            </view>
          </view>
        </view>
      </view>
    </z-paging>
  </view>

  <Tabbar :current-page="3"></Tabbar>
</template>
<script setup>
import {contractAuditList, contractRecipientList, contractUserList} from "../../../api/module/contract.js"
import {reactive, ref} from 'vue'
import {arrayGet, goNav, msg, pageUrl} from "../../../utils/common";
import {useStore} from 'vuex';
import {tabActiveStyle, tabInactiveStyle, tabItemStatusStyle} from "../../../utils/style";
import {onShow, onLoad} from "@dcloudio/uni-app";

const tabList = [{
  name: '全部',
  value: ''
}, {
  name: '待审核',
  value: '2'
}, {
  name: '已审核',
  value: '1'
}, {
  name: '驳回',
  value: '3'
}];

const store = useStore()
const userType = ref(1);
const tabIndex = ref(0)
const type = ref(1) //   1是我邀请的   2是被邀请的
const status = ref('')
const keyword = ref('')
const data = reactive({
  dataList: [],
})

onShow(() => {
  userType.value = store.state.userType
  if (paging.value?.reload) {
    paging.value.reload();
  }
})

const paging = ref(null)
const tabChange = (info) => {
  tabIndex.value = info.index;
  status.value = info.value
  paging.value.reload();
}
const search = () => {
  paging.value.reload();
}
const clear = () => {
  keyword.value = '';
  paging.value.reload();
}

const queryList = (pageNo, pageSize) => {
  let params = {
    page: pageNo,
    limit: pageSize,
    title: keyword.value,
    status: status.value
  }
  contractRecipientList(params).then(res => {
    paging.value.complete(res.data)
  })

}
</script>
<style scoped lang="scss" src="/static/css/contract/contractList.scss"></style>